<template>
  <div class="apply-container">
    <div class="left-container">
      <div class="title">申请开户</div>

      <accountCard :agents="cardAgents" />

      <accountList :agents="listAgents" />
    </div>
    <div class="right-container">
      <!-- 顶部统计 -->
      <div class="top-container">
        <div class="title-wrap">
          <div>审核总览</div>
          <div
            style="color: #17bd9c; font-size: 12px; cursor: pointer"
            @click="openRecord"
          >
            开户记录
          </div>
        </div>
        <div class="open-data-wrap">
          <div
            class="item"
            v-for="(item, index) in applyRecordList"
            :key="index"
          >
            <div>
              {{ selectDictLabel(bus_approval_status, item.approvalStatus) }}
            </div>
            <div class="num">{{ item.approvalNumber }}</div>
          </div>
          <!-- <div class="item">
            <div>审核中</div>
            <div class="num">0</div>
          </div>
          <div class="item">
            <div>审核中</div>
            <div class="num">0</div>
          </div> -->
        </div>
      </div>
      <div class="bottom-wrap">
        <div class="title">常见问题</div>
        <div style="height: 1200px; overflow: hidden; overflow-y: auto">
          <div
            class="question-wrap"
            v-for="(item, index) in anonymousList"
            :key="index"
          >
            <div class="item" @click="toAnonymousDetail(item)">
              <el-image
                :src="item.noticeImg"
                style="width: 80px; height: 80px"
              />
              <div class="content-wrap">
                <div class="" />
                <el-text :line-clamp="2" style="color: #333; font-weight: 500">
                  {{ item.noticeType === "1" ? "通知" : "公告" }}
                </el-text>
                <div>
                  <el-text :line-clamp="3" style="color: #999; font-size: 12px">
                    {{ item.noticeTitle }}
                  </el-text>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="applyAccount">
import { ref } from "vue";
import accountCard from "./components/account-card.vue";
import accountList from "./components/account-list.vue";
import { adAgentList } from "@/const/index.ts";
import { getAnonymousList, getApprovalOverview } from "@/api/apply/index.js";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { selectDictLabel } from "@/utils/ruoyi.js";
const { proxy } = getCurrentInstance();

const { bus_approval_status } = proxy.useDict("bus_approval_status");

const anonymousList = ref([]);

const cardAgents = adAgentList.slice(0, 4);
const listAgents = adAgentList.slice(4);
const applyRecordList = ref([]);

const router = useRouter();

const fetchAnonymousList = async () => {
  try {
    const res = await getAnonymousList("");
    anonymousList.value = res.data;
  } catch (error) {
    throw new Error(error);
  }
};

const openRecord = () => {
  router.push({
    path: "/accountMng/OpenRecord",
  });
};

const toAnonymousDetail = (item) => {
  router.push({
    path: "/accountMng/AnonymousDetail",
    query: { id: item.noticeId },
  });
};

const fetchApprovalOverview = () => {
  getApprovalOverview().then((res) => {
    if (res.data) {
      applyRecordList.value = res.data;
    }
  });
};

onMounted(() => {
  fetchAnonymousList();
  fetchApprovalOverview();
});
</script>

<style lang="scss">
.apply-container {
  display: flex;
  flex-direction: row;
  height: 100%;

  .title {
    color: #333;
    font-size: 14px;
    margin: 15px;
    font-weight: 600;
  }

  .left-container {
    border: #dcdfe6 solid 1px;
    background-color: #fff;
    margin: 20px;
    width: 75%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
  }

  .right-container {
    //  border: #dcdfe6 solid 1px;
    // background-color: #fff;
    flex: 1;
    margin: 20px 20px 20px 0px;
    height: 100%;

    .top-container {
      border: #dcdfe6 solid 1px;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
      color: #333;
      font-size: 14px;
      font-weight: 600;

      .title-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .open-data-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 20px;
          font-size: 12px;
          color: #333;

          .num {
            font-size: 16px;
            font-weight: 600;
            margin-top: 8px;
          }
        }
      }
    }

    .bottom-wrap {
      border: #dcdfe6 solid 1px;
      background-color: #fff;
      border-radius: 10px;
      color: #333;
      margin-top: 20px;
      flex: 1;
      height: 88%;
      .question-wrap {
        display: flex;
        margin: 0 10px 10px 10px;
        .item {
          display: flex;
          flex-direction: row;
          .content-wrap {
            flex: 1;
            color: #333;
            font-size: 14px;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
